<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_routeCalculateMeasure"></title>
    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      .mapboxgl-popup-close-button {
        outline: none;
      }
    </style>
  </head>

  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <script type="text/javascript">
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var map,
        routeCalculateMeasureParameters,
        routeCalculateMeasureService,
        attribution =
          "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
          " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
          " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
        mapUrl = host + '/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}',
        serviceUrl = host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst';

      map = new mapboxgl.Map({
        container: 'map',
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              attribution: attribution,
              type: 'raster',
              tiles: [mapUrl],
              tileSize: 256
            }
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles'
            }
          ]
        },
        center: [116.2740019864, 39.8970124079],
        zoom: 12
      });
      map.addControl(new mapboxgl.NavigationControl(), 'top-left');
      map.addControl(new mapboxgl.supermap.LogoControl({ link: 'https://iclient.supermap.io' }), 'bottom-right');

      map.on('load', function () {
        routeCalculateMeasureProcess();
      });

      function routeCalculateMeasureProcess() {
        var piontLists = [
          [116.2143386597, 39.8959419733, 0],
          [116.217501999125, 39.896670999665, 282.3879789906],
          [116.220156000875, 39.896820999605, 509.9746364534],
          [116.228716999, 39.8968419995966, 1242.1340098965],
          [116.25000000025, 39.8968619995886, 3062.3045713007],
          [116.27412300025, 39.8967689996258, 5125.3836697258],
          [116.310443000875, 39.8971139994878, 8231.7823666408],
          [116.344168500812, 39.8976724992644, 11116.7053546891]
        ];

        var LineGeometryData = {
          type: 'Feature',
          geometry: {
            type: 'LineString',
            coordinates: piontLists
          }
        };
        map.addLayer({
          id: 'route',
          type: 'line',
          source: {
            type: 'geojson',
            data: LineGeometryData
          },
          layout: {
            'line-join': 'round',
            'line-cap': 'round'
          },
          paint: {
            'line-color': '#888',
            'line-width': 8
          }
        });

        //将形成路由的点提出来，为了构造下面点定里程服务sourceRoute
        var routeObj = LineGeometryData.geometry.coordinates;
        var routeLine = LineGeometryData;

        //在组成路由的点中选取一个查询点(数组中第4个点),并添加到地图上
        var point = [routeObj[4][0], routeObj[4][1]];
        var pointGeometryData = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: point
          }
        };

        //点定里程服务
        routeCalculateMeasureService = new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
        routeCalculateMeasureParameters = new mapboxgl.supermap.RouteCalculateMeasureParameters({
          sourceRoute: routeLine, //必选,路由类型
          point: pointGeometryData, //必选
          tolerance: 0.0001,
          isIgnoreGap: false
        });
        routeCalculateMeasureService
          .routeCalculateMeasure(routeCalculateMeasureParameters)
          .then(function (routeCaculateServiceResult) {
            map.addLayer({
              id: 'Point',
              type: 'circle',
              source: {
                type: 'geojson',
                data: pointGeometryData
              },
              paint: {
                'circle-radius': 6,
                'circle-color': 'red'
              }
            });

            var innerHTML = resources.msg_MByQuery + routeCaculateServiceResult.result.measure;
            new mapboxgl.Popup().setLngLat(point).setHTML(innerHTML).addTo(map);
          });
      }
    </script>
  </body>
</html>
